<template>
  <span>
    <Input v-model:value="innerValue" class="w-200px" size="small" width="100px" v-if="state !== 'edit'"> </Input>
    <span v-else class="text-lg">{{ value }}</span>
    <EditOutlined
      @click="handleEdit"
      v-if="state === 'edit' && checkPowerByName(props.powerName)"
      class="cursor-pointer ml-10px"
      :style="{ color: '#303f9f' }"
    />
    <CheckOutlined
      @click="handleSubmit"
      v-if="state === 'submit'"
      class="cursor-pointer ml-10px"
      :style="{ color: '#303f9f' }"
    />
    <CloseOutlined
      @click="handleClose"
      v-if="state === 'submit'"
      class="cursor-pointer ml-10px"
      :style="{ color: '#303f9f' }"
    />
  </span>
</template>

<script lang="ts" setup>
import { ref, toRefs, unref } from 'vue';
import { EditOutlined, CheckOutlined, CloseOutlined } from '@ant-design/icons-vue';
import { Input } from 'ant-design-vue';
import { checkPowerByName } from '../../utils/permission';

const props = defineProps({
  submitApi: Function,
  value: String,
  submitFields: { default: undefined },
  submitParams: { default: {} },
  powerName: String,
});
const emits = defineEmits(['success']);

const { submitApi, value, submitFields, submitParams } = toRefs(props);

const state = ref<'edit' | 'submit'>('edit');
const innerValue = ref<string>();

const handleEdit = () => {
  state.value = 'submit';
};
const handleSubmit = async () => {
  let _submitFields = submitFields.value;
  let params = _submitFields ? { ...submitParams.value, [_submitFields]: innerValue.value } : innerValue.value;
  await unref(submitApi)(params);
  emits('success');
  state.value = 'edit';
};

const handleClose = () => {
  state.value = 'edit';
};
</script>

<style lang="less" scoped></style>
